<template>
	<view class="content">
		<scroll-view id="tab-bar" class="tui-scroll-h" scroll-with-animation  :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" :id="tab.name" class="tui-tab-item" :data-current="index" @click="tabClick(tab.id)">
				<view class="tui-tab-item-title" :class="{ current: tab.id == id }">{{ tab.categoryName }}</view>
			</view>
		</scroll-view>
		
		<view class="goods-list">
			<view class="info-wrap">
				<view class="info-list">
					<view v-for="(item,index) in infomList" :key="index" class="info-item" @tap="toDetail(item.id)">
						<view style="width: 59.144%">
							<view class="title">{{item.titile}}</view>
							<view class="other-info">
								<view class="item-right">
									{{item.addTime.split(" ")[0]}}
								</view>
								<view class="read-num">
									<image src="../../static/img/info_slices/business_college_read.png" mode="" style="margin-right: 10upx;"/>
									<text>{{item.readNum}}</text>
								</view>
								
							</view>
						</view>
						
						<view style="margin-left: 21px;">
							<view class="img-list" v-if="item.hasVideo == 1">
								
								<view class="info-img" v-if="item.imgList[0]">
									<image :src="item.imgList[0].imgSrc"/>
								</view>
							</view>
							
							<view class="video-cover" v-if="item.hasVideo == 0">
								<image class="cover" :src="item.coverImg"/>
								<view class="stop">
									<image src="../../static/img/info_slices/business_college_play.png" mode="" />
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 空白页 -->
		<empty v-if="total == 0"></empty>
		
		
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="1" type="primary"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn"></tui-nomore>
		<!--加载loadding-->
		
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import share from '@/components/share';
	import empty from "@/components/noCheckstand";

	export default {
		components: {
			uniLoadMore,
			share,
			empty
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition: "fixed",
				headerTop: "0px",
				loadingType: 'more', 		//加载更多状态
				infomList:[],      			//列表
				tabBars:[],
				
				id:"",
				scrollInto:"",
				
				total:"",				//商品数
				limit:"10",				//一页十条
				page:"1",				//几页
				pages:"",				//一共多少页
				loadding: false,		//加载
				pullUpOn: true			//没有数据
			};
		},

		onLoad(options) {
			this.id = options.id
			this.loadData();
			
			// 商品分类
			this.tui.request(
				'/app/material/getMaterialCategory',
				'GET', {
					categoryType: 2,
				},
				false,
				false,
				false,
			).then(res => {
				this.tabBars = res.data.list;
			
			}).catch(err => {
				console.log(err)
			})
			
		},

		// 下拉刷新
		onPullDownRefresh: function() {
			this.page = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.$http.get(this.tui.interfaceUrl() + '/app/material/materialList?materialCategerId=' + this.id +'&page='+this.page+'&limit='+this.limit, {}).then(res => {
				if (res.data.data.errno == 0) {
					this.total = res.data.total;
					this.pages = res.data.pages;
					this.infomList = res.data.list;;
				} 
			
			}).catch(err => {
				console.log(err)
				
			})
			uni.stopPullDownRefresh();
		},
		
		// 上拉加载
		onReachBottom: function() {
			console.log(this.page)
			if (!this.pullUpOn) {
				return;
			}
			this.loadding = true;
			if (this.page == this.pages) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				++this.page;
				this.loadData();
				this.loadding = false
			}
		},

		methods: {
			//加载商品
			loadData() {
				this.$http.get(this.tui.interfaceUrl() + '/app/material/materialList?materialCategerId=' + this.id +'&page='+this.page+'&limit='+this.limit, {}).then(res => {
					console.log(res.data.data)
					if (res.data.errno == 0) {
						this.total = res.data.data.total;
						this.pages = res.data.data.pages;
						
						let worksList = res.data.data.list;
						worksList.forEach(item => {
							this.infomList.push(item);
						});		
					} 
					
				
				}).catch(err => {
					console.log(err)
					
				})
				
				
			},
			
			//筛选点击
			tabClick(e) {
				this.id = e
				this.$http.get(this.tui.interfaceUrl() + '/app/material/materialList?materialCategerId=' + this.id +'&page='+this.page+'&limit='+this.limit, {}).then(res => {
					console.log(res.data.data)
					if (res.data.errno == 0) {
						this.total = res.data.data.total;
						this.pages = res.data.data.pages;
						this.infomList = res.data.data.list;
					} 
					
				
				}).catch(err => {
					console.log(err)
					
				})
			},
			
			// 跳转详情
			toDetail(id) {
				uni.navigateTo({
					url: './info-detail?id='+ id
				})
			},
			
			// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
			onNavigationBarSearchInputChanged(e) {
				console.log(e.text)  //打印输入框值	
			},
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
	}

	// .content {
	// 	padding-top: 240upx;
	// }
	
	/*navigation-bar*/
	.tui-content-box {
		width: 100%;
		height: 44px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.tui-search-box {
		width: 100%;
		height: 56upx;
		margin: 0 80rpx;
		border-radius: 18px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
		color: #bfbfbf;
		display: flex;
		align-items: center;
		background-color: rgba(255,255,255,.2);
	}
	
	.tui-search-text {
		color: #ffffff;
		padding-left: 10rpx;
	}
	
	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		white-space: nowrap;
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index:999;
	}
	
	.tui-tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
		position: relative;
		
		.current {
			color: #333333;
			font-size: 15px;
		
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid #6E609E;
			}
		}
		
	}
	
	.tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
	}
	

	/* 列表 */
	.info-list {
		margin-top: 100upx;
		
		.info-item {
			display: flex;
			justify-content: space-between;
			padding: 30upx 30upx 20upx;
			border-bottom: 1px solid rgba(242, 242, 242, 1);

			.title {
				font-size: 36upx;
				font-weight: 400;
				color: rgba(51, 51, 51, .8);
				line-height: 43upx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orident: vertical;
			}

			.img-list {
				display: flex;
				flex-wrap: wrap;

				.info-img {
					width: 240upx;
					height: 200upx;
					background: url("../../static/img/info_slices/business_college_listpk.png") no-repeat;
					-webkit-background-size: 100% 100%;
					background-size: 100% 100%;

					&:nth-of-type(3n) {
						margin-right: 0;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.video-cover {
				position: relative;
				margin: 20upx 0;
				width: 690upx;
				height: 360upx;
			

				.cover {
					width: 100%;
					height: 100%;
				}

				.stop {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 70upx;
					height: 70upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.other-info {
				display: flex;
				justify-content: space-between;
				padding-top: 60upx;

				.read-num {
					display: flex;
					align-items: center;
					font-size: 24upx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);

					image {
						width: 25upx;
						height: 20upx;
						margin-right: 5upx;
					}
				}

				.item-right {
					font-size: 24upx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					line-height: 43upx;
				}
			}
		}
	}
	.noList{
		
		image{
			margin: 0 auto;
			width: 280upx;
			height: 240upx;
			display: block;
			margin-top: 100upx;
			text-align: center;
		}
		
	}
</style>
